<template>
  <div id="login">
    <el-container>
      <el-header>宠物之家</el-header>
      <!--主体内容-->
      <el-main>
        <el-row>
          <el-col :span="8" :offset="8">
            <div id="loginBox">
              用户登录<br />
              账号：<el-input
                v-model="adminUser.username"
                placeholder="账号"
                :style="{ width: '50%' }"
              ></el-input
              ><br />
              密码：<el-input
                type="password"
                v-model="adminUser.password"
                placeholder="密码"
                :style="{ width: '50%' }"
              ></el-input
              ><br />
              <el-button type="primary" @click="y_reset">重置</el-button>
              <el-button type="primary" @click="y_login">登录</el-button>
            </div>
          </el-col>
        </el-row>
      </el-main>
      <el-footer>Copyright © 2022xxxx all rights reserved</el-footer>
    </el-container>
  </div>
</template>

<script>
// import axios from "axios";
export default {
  data() {
    return {
      adminUser: {},
    };
  },
  methods: {
    y_reset() {
      //重置
      this.adminUser = {};
    },
    y_login() {
      //点击登录按钮后发送ajax请求给后端进行账号密码比对
      this.$axios.post("/login", this.adminUser).then((res) => {
        let token = res.data.data.token;
        console.log(token);
        localStorage.setItem("token", token);
        if (res.data.code == 200) {
          this.$router.push({ name: "home" });
        } else {
          alert("登录失败请检查账号密码");
        }
      });
    },
  },
};
</script>

<style>
* {
  margin: 0;
  padding: 0;
}
body,
html,
.el-container,
#login {
  height: 100%;
  width: 100%;
}

/*放账号密码input的div*/
#loginBox {
  background-color: #eee;
  border-radius: 15px;
  margin-top: 15%;
}

/*布局容器样式 main header fotter*/
.el-header {
  background-color: #2c3e50;
  color: #fff;
  text-align: center;
  line-height: 60px;
  font-size: xx-large;
  font-weight: bolder;
}
.el-footer {
  background-color: #bbb;
  color: #000;
  text-align: center;
  line-height: 60px;
}
.el-main {
  background-color: #fff;
  color: #333;
  text-align: center;
  line-height: 80px;
}
</style>
